<template>
  <div class="guarantee-detail">
    <div class="info-container">
      <div class="main">
        <el-timeline class="left-container">
          <el-timeline-item class="huobo" icon="huobo-explorer">
            <div class="website">
              <div class="title">
                维权网站：{{info.website}}
                <span class="status">{{info.statusText}}</span>
              </div>
              <div class="info">
                <span>来自{{info.user}}的维权</span>
                <span>{{info.date}}</span>
                <span>
                  <i class="el-icon-chat-dot-square"></i>
                  评论：{{info.comments}}
                </span>
                <span>
                  <i class="el-icon-view"></i>
                  预览：{{info.preview}}
                </span>
              </div>
            </div>
          </el-timeline-item>
          <el-timeline-item class="huobo" icon="huobo-question1">
            <div class="activist">
              <div class="title">
                维权原因：{{info.activist.reason}}
              </div>
              <div class="content">
                <p>{{info.activist.content}}</p>
              </div>
              <el-row class="imgs-wrap">
                <el-col
                  :span="6"
                  v-for="(img, index) in info.activist.images"
                  :key="index"
                >
                  <el-image
                    :src="img"
                    :preview-src-list="info.activist.images"
                  ></el-image>
                </el-col>
              </el-row>
            </div>
          </el-timeline-item>
          <el-timeline-item class="huobo" icon="huobo-note">
            <div class="title">
              维权专员受理维权
              <span class="date">{{info.acceptActivistDate}}</span>
            </div>
          </el-timeline-item>
          <el-timeline-item class="huobo" icon="huobo-node">
            <div class="title">
              受理过程
              <span class="date">{{info.acceptActivistDate}}</span>
            </div>
            <div class="content">
              <p
                v-for="(item, index) in info.acceptContent"
                :key="index"
              >
                {{index + 1}}、{{item}}
              </p>
            </div>
          </el-timeline-item>
          <el-timeline-item class="huobo" icon="huobo-ok">
            <div class="title">
              处理结果：{{info.result}}
              <span class="date">{{info.resultDate}}</span>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div class="aside">
        <activist :data="activistData"></activist>
        <plate></plate>
      </div>
    </div>
    <comments></comments>
  </div>
</template>

<script>
import activist from './components/ActivistData.vue';
import plate from './components/Plate.vue';
import comments from './components/Comments.vue';

export default {
  name: 'GuaranteeDetail',
  components: {
    activist,
    plate,
    comments
  },
  data() {
    return {
      info: {},
      commets: []
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      const { id } = this.$route.params;
      console.log(id);
      this.info = {
        website: '58娱乐(5875i.com)',
        statusText: '娱乐城曝光',
        user: '23995',
        date: '2020-08-26',
        comments: 32,
        preview: 142,
        activist: {
          reason: '无限期审核',
          content: '8-23开始不能出款，联系客服说审核，要3天，3天后账户还是正在被风控部门审核中，一直不出款。https://www.www-5875i.com',
          images: [
            'http://dbadmin.ixinkexin.com/uploads/img/20130101/781df63fb6ac26e4aabbf217f20d7c70.png',
            'http://dbadmin.ixinkexin.com/uploads/img/20130101/781df63fb6ac26e4aabbf217f20d7c70.png',
            'http://dbadmin.ixinkexin.com/uploads/img/20130101/781df63fb6ac26e4aabbf217f20d7c70.png'
          ]
        },
        acceptActivistDate: '2020-08-26',
        acceptContent: [
          '维权专员联系该娱乐城了解出款要求',
          '根据会员提供的资料，此会员从8月23开始无法出款的，维权专员会根据一般正规娱乐城的审核时长，会在9月1日联系该娱乐城跟进此会员的审核进展',
          '2020-09-01维权专员再次联系该娱乐城跟进审核进展，该娱乐城表示此会员的款项还未审核完成，而且也无法提供审核完成时间，怀疑该娱乐城存在故意不出款的嫌疑，提醒光大玩家要谨慎选择游戏平台！',
        ],
        result: '娱乐城曝光',
        resultDate: '2020-09-01'
      };
      this.activistData = {
        total: 9538,
        dealed: 9536,
        undo: 2,
        money: 7414100
      };
    }
  }
};
</script>

<style lang="less" scoped>
  .left-container {
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
  }
  .guarantee-detail {
    margin-top: 20px;
    /deep/ .el-timeline-item__icon {
      margin-top: 20px;
      padding: 10px;
      border-radius: 50%;
      font-size: 20px;
      background-color: #2c81ff;
    }
    /deep/ .el-timeline-item__tail {
      border-left-color: #2c81ff;
    }
    /deep/ .el-timeline-item__wrapper {
      margin-left: 20px;
      margin-bottom: 30px;
    }
    .title {
      padding: 0 0 15px 0;
      font-size: 20px;
      font-weight: 600;
      .date {
        display: block;
        margin-top: 8px;
        font-weight: 400;
        font-size: 14px;
        color: #888;
      }
    }
    .content {
      color: #666;
      p {
        margin: 5px 0;
        line-height: 20px;
        font-size: 14px;
      }
    }

    .website {
      .title span {
        margin-left: 10px;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 16px;
        color: #fff;
        background-color: #2c81ff;
      }
      .info {
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
        border-top: 1px solid #ddd;
      }
      .el-icon-chat-dot-square {
        color: rgb(255, 153, 136);
      }
      .el-icon-view {
        color: rgb(191, 135, 255);
      }
    }
  }

  .info-container {
    display: flex;
    .main {
      flex: 1;
    }
    .aside {
      display: flex;
      flex-direction: column;
      flex: 0 0 360px;
    }
  }
</style>
